<template>
  <div class="user-manage">
    <div class="query-form">
      <el-form ref="reform" :inline="true" v-model="state.user">
        <el-form-item label="用户名" prop="user.userId">
          <el-input v-model="state.user.userId" placeholder="请输入用户ID" />
        </el-form-item>
        <el-form-item label="用户名称" prop="user.userPwd">
          <el-input v-model="state.user.userPwd" placeholder="请输入用户名称" />
        </el-form-item>
        <el-form-item label="状态" prop="user.userState">
          <el-select v-model="state.user.userState">
            <el-option :value="0" label="所有"></el-option>
            <el-option :value="1" label="在职"></el-option>
            <el-option :value="2" label="离职"></el-option>
            <el-option :value="3" label="试用期"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="handleQuery">查询</el-button>
          <el-button type="success" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="base-table">
      <div class="action">
        <el-button type="primary">新增</el-button>
        <el-button type="danger">批量删除</el-button>
      </div>
      <el-table :data="state.userList.value">
        <el-table-column type="selection" width="55" />
        <el-table-column
          v-for="item in state.columns"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
        ></el-table-column>
        <el-table-column label="操作" width="150">
          <template #default="scope">
            <el-button @click="handleClick(scope.row)" size="mini"
              >编辑</el-button
            >
            <el-button @click="handleDel(scope.row)" type="danger" size="mini"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagination"
        background
        layout="total, prev, pager, next"
        :total="pager.total"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script setup>
import { getCurrentInstance, onMounted, reactive, ref } from "vue";
const state = reactive({
  user: {
    userId: "",
    userPwd: "",
    userState: 0,
  },
  userList: [],
  columns: [
    {
      label: "用户ID",
      prop: "userId",
    },
    {
      label: "用户名",
      prop: "userName",
    },
    {
      label: "用户邮箱",
      prop: "userEmail",
    },
    {
      label: "用户角色",
      prop: "role",
    },
    {
      label: "用户状态",
      prop: "state",
    },
    {
      label: "注册时间",
      prop: "createTime",
      width: 180,
    },
    {
      label: "最后登录时间",
      prop: "lastLoginTime",
      width: 180,
    },
  ],
});
const pager = reactive({
  pageNum: 1,
  pageSize: 10,
});
const userList = ref([]);
const { proxy, ctx } = getCurrentInstance();
onMounted(() => {
  getUserlist();
});
// 获取用户列表 15383645186
const getUserlist = async () => {
  let params = { ...state.user, ...pager };
  const { list, page } = await proxy.$api.getUserList(params);
  state.userList.value = list;
  pager.total = page.total;
};
// 查询事件 获取用户列表
const handleQuery = () => {
  getUserlist();
};
// 重置查询表单
const handleReset = () => {
  ctx.$refs.reform.resetFields();
};
const handleCurrentChange = (e) => {
  pager.pageNum = e;
  getUserlist();
};
const handleClick = (e) => {};
const handleDel = async (e) => {
  await proxy.$api.userDel({
    userIds: [e.userId],
  });
  proxy.$message.success("删除成功");
  getUserlist();
};
</script>
<style scoped></style>
